<body style="margin: 0">
  Picture:
  <input
    id="picInput"
    onchange="handlePicChange"
    type="file"
    name="picture"
    multiple
  />

  <img id="pic" alt="" />
  <div id="img-wrapper"></div>
  <input type="button" value="Submit" onclick="submit()" />
  <div id="progress"></div>
  <script>
    window.onload = function () {
      const i = document.getElementById("picInput");
      i.addEventListener("change", handlePicChange);
    };
    function handlePicChange(file, files) {
      const i = document.getElementById("picInput");
      const wrapper = document.getElementById("img-wrapper");
      wrapper.innerHTML = "";
      for (let file of this.files) {
        if (file.type && file.type.startsWith("image")) {
          const u = URL.createObjectURL(file);
          const pic = document.createElement("img");
          pic.src = u;
          pic.style.width = "200px";
          wrapper.appendChild(pic);
        }
      }
    }

    async function submit() {
      let formData = new FormData();
      formData.append("firstName", "John");
      formData.append("age", "22");
      const i = document.getElementById("picInput");
      for (let file of i.files) {
        formData.append("image", file, file.name);
      }

      //   formData.append("image", imageBlob, "image.png");

      const req = new XMLHttpRequest();
      req.open("post", "/upload");
      //   req.setRequestHeader("content-type", "multipart/form-data");
      req.onload = function (e) {
        console.log(e, req.status, req.statusText, req.responseText);
      };
      const progress = document.getElementById("progress");
      req.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          progress.textContent = `${e.loaded} / ${e.total}`;
        }
      };
      req.send(formData);
    }
  </script>
</body>
